<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 用户信息 -->
      <div v-if="session?.user" class="flex items-center p-6 bg-white rounded-xl shadow-md mb-8">
        <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mr-6">
          <UIcon name="i-heroicons-user-circle" class="w-10 h-10 text-indigo-500" />
        </div>
        <div>
          <h2 class="text-2xl font-bold text-gray-800">
            {{ session.user.name || '尊敬的用户' }}
          </h2>
          <p class="text-gray-500 mt-1">
            {{ session.user.email }}
          </p>
        </div>
      </div>

      <!-- 菜单 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <ul class="divide-y divide-gray-200">
          <li v-for="(item, index) in menuItems" :key="index" class="flex items-center p-4 hover:bg-gray-50 transition-colors cursor-pointer">
            <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-4">
              <UIcon :name="item.icon" class="w-5 h-5 text-gray-600" />
            </div>
            <span class="flex-1 text-gray-700 font-medium">{{ item.label }}</span>
            <UIcon name="i-heroicons-chevron-right" class="w-5 h-5 text-gray-400" />
          </li>
        </ul>
      </div>

      <!-- 退出登录 -->
      <div class="mt-12 text-center">
        <button class="text-red-500 hover:text-red-700 font-medium transition-colors" @click="logout">
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})

const { data: session } = await authClient.useSession(useFetch)
const { signOut } = authClient

const menuItems = [
  { icon: 'i-heroicons-cog-6-tooth', label: '账户设置' },
  { icon: 'i-heroicons-bell', label: '通知中心' },
  { icon: 'i-heroicons-shield-check', label: '安全与隐私' },
  { icon: 'i-heroicons-question-mark-circle', label: '帮助与支持' }
]

async function logout() {
  await signOut()
  await navigateTo('/login')
}
</script>
